<template>
	<view class="content-wrapper">
		<view class="nodata-content" v-if="orderList.length==0 && !hasOrder">
			<image src="../../static/ic_no_order.png" class="no-image" />
			<view class="search-order">
				<image src="../../static/ic_search.png" />
				<input type="number" maxlength="11" v-model="phone" placeholder="请输入下单时的联系方式" class="search-hint" />
			</view>
			<button @click="getInfo" class="btn">查询订单</button>
		</view>
		<view class="list-content" v-else>
			<view class="search-view">
				<view class="search-list">
					<image src="../../static/ic_search_p.png" />
					<input placeholder="搜索" v-model="phone" @input="searchOrder" />
				</view>
				<text @click="getList">搜索</text>
			</view>
			<view v-if="orderList.length>0">
				<view v-for="(item ,index) in orderList" :key="index">
					<view class="item" @click="goDetail" :id="index">
						<view class="status">
							<view class="status-content" :class="{'harf':item.orderState=='CANCELED'}">{{getStatus(item.orderStateProgress)}}</view>
						</view>
						<view class="info">
							<view>当前护工：</view>
							<view class="nurse">{{item.currentNurseName==null?"未安排":item.currentNurseName}}</view>
							<view>开始日期：{{item.startDate==null?"未开始":item.startDate}}</view>
						</view>
						<view class="line" style="margin:10upx 0" />
						<view class="bal">
							<view>余额：</view>
							<text :class="{'harf':item.balance==null}">{{item.balance==null?0:item.balance}}元</text>
							<view class="phone-consult" @click.native.stop="callPhone" :id="index">
								<image src="../../static/ic_phone_gray.png" />
								<view>电话咨询</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="nodata">
				<image src="../../static/ic_no_order.png" class="no-image" />
				<text>没有相关订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../util/textUtil.js"
	export default {
		data() {
			return {
				phone: "",
				keyword: "",
				isSearch: false,
				orderList: [],
				hasOrder: false,
				openId: ""
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "订单列表"
			});
			//
		},
		onShow() {
			//let code = util.getUrlParam("code");
			//	let that = this;
		//	getApp().globalData.token  = "058b74f2332892765bd25c3bf2ff7297"
		   
			// if (token != null || token != "") {
			// 	that.getList();
			// }else{
			// 	this.getInfo();
			// }
			this.getInfo();
		},
		methods: {
			
			getInfo: function() {
				let that = this;
				let code = util.getUrlParam("code");
				getApp().globalData.code = code;
				uni.request({
					url: getApp().globalData.baseUrl + 'app/wxLogin/' + code,
					method: 'GET',
					success(res) {
						console.log("获取token的数据", res);
						if (res.data.code == 0) {
							getApp().globalData.token = res.data.token;
							that.getList();
						}
					}
				});
			},
			getList: function() {
				this.getStatusList();
				uni.request({
					url: getApp().globalData.baseUrl + 'order/order/myOrder',
					method: 'GET',
					data: {
						"patientPhone": this.phone
					},
					header: {
						"token": getApp().globalData.token
					},
					success: res => {
						console.log("订单列表", res);
						if (res.data.code == 0) {
							if (!this.hasOrder) {
								this.hasOrder = true;
							}
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "未查询到订单！",
									icon: "none"
								});
							}
							this.orderList = res.data.list;
						}
					},
					fail: () => {
						uni.showToast({
							title: "服务器异常！",
							icon: "none"
						})
					},
				});
			},
			goDetail: function(e) {
				console.log(e);
				let index = e.currentTarget.id;
				let orderId = this.orderList[index].orderId;
				//let status = this.orderList[index].orderState;
				uni.navigateTo({
					url: "orderdetail?orderId=" + orderId 
				});
				// if (status == 'CANCELED') {
				// 	uni.showToast({
				// 		title: '订单已取消',
				// 		icon: 'none'
				// 	});
				// } else {
				// 	
				// }
			},
			callPhone: function(e) {
				let index = e.currentTarget.id;
				let phone = this.orderList[index].currentNursePhone;
				if(phone!=null){
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}else{
					uni.showToast({
						title:"还未分配护工!暂无电话",
						icon:"none"
					});
				}
			},
			searchOrder: function() {
				console.log("失去焦点.....")
				this.isSearch = true;
			},
			getStatusList() {
				uni.request({
					url: getApp().globalData.baseUrl + 'sys/sysdict/listByType?type=orderStateProgress',
					method: 'GET',
					header: {
						"token": getApp().globalData.token
					},
					success: res => {
						console.log("状态列表", res);
					},

				});
			},
			getStatus: function(status) {
				if (status == 'TODO') {
					return "待处理";
				} else if (status == 'SERVICING') {
					return "进行中";
				} else if (status == 'FINISH') {
					return "已完成";
				}
			}
		}
	}
</script>

<style>
	.content-wrapper {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		align-items: center;
		background-color: #f1f1f1;
	}

	.nodata-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		position: fixed;
		align-items: center;
	}

	.no-image {
		margin: 60upx 40upx;
		width: 300upx;
		height: 301upx;
	}

	.search-order {
		width: 80%;
		display: flex;
		flex-direction: row;
		border: solid 2upx #e9e9e9;
		background-color: #FFFFFF;
		height: 80upx;
		border-radius: 10upx;
		align-items: center;
		padding: 0 20upx;
	}

	.search-order image {
		height: 40upx;
		width: 40upx;
		margin-right: 20upx;
	}

	.search-order input {
		flex: 1;
		color: #555555;
		font-size: 28upx;
	}

	.search-order .hint {
		font-size: 28upx;
		color: #cecece;
	}

	.btn {
		margin-top: 60upx;
		letter-spacing: 10upx;
		width: 85%;
		height: 80upx;
		line-height: 80upx;

		color: #FFFFFF;
		font-size: 28upx;
		background: #a74980;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		align-items: center;
		justify-content: center;
		background-color: #f1f1f1;
		font-size: 32upx;
		color: #333333;
	}

	.nodata image {
		margin-top: 160upx;
		margin-bottom: 60upx;
		width: 300upx;
		height: 301upx;
	}

	.btn:after {
		border: 0;
	}

	.list-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.list-content .item {
		background-color: #FFFFFF;
		padding: 20upx 40upx;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
		color: #777777;
		margin-bottom: 20upx;
	}

	.item .status {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}



	.item .status .status-content {
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		width: 120upx;
		border-radius: 10upx;
		font-size: 28upx;
		color: white;
		background-color: #ba7099;

	}

	.item .status .harf {
		background-color: #bc8aa7;
	}

	.item .info {
		display: flex;
		flex-direction: row;
		height: 60upx;
		align-items: center;
		font-size: 28upx;
		color: #777777;
	}

	.item .info .nurse {
		color: #a74980;
		flex: 1;
	}

	.item .info .time {
		flex: 1;
		text-align: right;
	}

	.item .bal {
		display: flex;
		flex-direction: row;
		height: 60upx;
		align-items: center;
	}

	.item .bal text {
		flex: 1;
		color: #b34a86;
	}

	.item .bal .harf {
		color: #bc8aa7;
	}

	.item .phone-consult {
		height: 60upx;
		border-left: #E9E9E9 solid 2upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item .phone-consult image {
		margin-left: 20upx;
		margin-right: 10upx;
		width: 30upx;
		height: 30upx;

	}

	.search-view {
		display: flex;
		flex-direction: row;
		margin: 20upx;
		align-items: center;
	}

	.search-view text {
		width: 120upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 10upx;
		background-color: #aaaaaa;
		color: #FFFFFF;
		font-size: 28upx;
		margin-left: 30upx;
	}

	.search-list {

		flex: 1;
		background-color: #FFFFFF;
		border-radius: 10upx;
		height: 70upx;
		align-items: center;

		display: flex;
		flex-direction: row;
		font-size: 28upx;
		color: #999999;
	}

	.search-list input {
		color: #777777;
		font-size: 28upx;
	}

	.search-list .hint {
		color: #999999;
	}

	.search-list image {
		width: 30upx;
		height: 30upx;
		margin: 0 30upx;

	}
</style>
